<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 600px;
            height: 600px;
            margin: 50px auto 0;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat (4,1fr);
            grid-gap: 8px 15px;
            grid-template-areas: 
            'a b b'
            'c b b'
            'd d e'
            'f g g'
            ;
        }
        span:nth-child(1){
            grid-area: a;
            background-color: rgb(247, 111, 111);
        }
        span:nth-child(2){
            grid-area: b;
            background-color: rgb(228, 225, 92);
        }
        span:nth-child(3){
            grid-area: c;
            background-color: rgb(173, 238, 120);
        }
        span:nth-child(4){
            grid-area: d;
            background-color: rgb(28, 129, 45);
        }
        span:nth-child(5){
            grid-area: e;
            background-color: rgb(138, 218, 200);
        }
        span:nth-child(6){
            grid-area: f;
            background-color: rgb(173, 129, 243);
        }
        span:nth-child(7){
            grid-area: g;
            background-color: rgb(240, 62, 121);
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
    </div>
</body>
</html>